<template>
	<div id="temp">
		<div class="row" v-for="(item,index) in list">
			<mt-switch class="switch" v-model="value[index]"></mt-switch>
			<img class="img" :src="item.thumb_path" alt="商品图片" >
			<div class="inforight">
				<h4 v-text="item.title"></h4>
				<div class="bottom">
					<ul>
						<li>￥{{item.sell_price}}</li>
						<li><carinputNumber :initcount = "item.cou" :goodsid = "item.id" v-on:send = "getdata"></carinputNumber></li>
						<li><a href="javascript:void(0)" @click ='delet(item.id,index)'>删除</a></li>
					</ul>

				</div>
			</div>
		</div>
		<div id="total">
			<div class="desc">
				<ul>
					<li>总计（不含运费）</li>
					<li>已勾选商品{{totalcount}}件,总价:￥{{totalAmount}}元</li>
				</ul>
			</div>
			<div id="button">
				<mt-button  type="danger" size="small">去结算</mt-button>
			</div>
		</div>
		{{value}}
	</div>
</template>
<script>
	import carinputNumber from '../subcom/carinputNumber.vue';
	import {getobj,updatedata,removeItem} from '../../kits/localstorage.js';
	export default {
	    computed:{
            totalcount(){

                var trueArr =  this.value.filter(function(item){return item;});
                var amount = 0;
                this.value.forEach((item,index) =>{
                    if(item){
                        var count = this.list[index].cou;
                        var price = this.list[index].sell_price;
                        var itemamount =   count * price;
                        amount += itemamount;
                    }
                });
                this.totalAmount = amount;
                return trueArr.length;
            }
		},
	    components:{
            carinputNumber
		},
		data(){
			return {
				value:[],
				list:[],
                totalAmount:0
			}
		},
		created(){
		    this.getlist();
		},
		methods:{
		    delet(goodsid,index){
				this.value.splice(index,1);
				this.list.splice(index,1);
				removeItem(goodsid)
			},
		    getdata(resObj){
			 	updatedata(resObj);
                for(var i = 0;i <this.list.length ; i++){
                    if(this.list[i].id == resObj.goodsid){
                        if(resObj.type =='add'){
                            this.list[i].cou = this.list[i].cou + 1;
                        }else{
                            this.list[i].cou = this.list[i].cou - 1;
                        }
                        break;
                    }
                }
			},
			getlist(){
			    var obj = getobj();
			    var idstr = '';
			    for(var k in obj){
			        idstr += k +",";
				}
                idstr = idstr.substring(0,idstr.length-1);
				console.log(idstr)
				var url = 'http://182.254.146.100:8899/api/goods/getshopcarlist/'+idstr;
				this.$http.get(url).then(function(res){
				    res.body.message.forEach(function(item){
                        item.cou = obj[item.id]
					});
				    this.list =  res.body.message;
				})
			}
		}
		
	}
</script>
<style scoped>
	.row{
		border-bottom: 1px solid rgba(0,0,0,0.3);
		height: 102px;
		display: flex;
		padding: 5px;
	}

	.switch{
		flex:0 0 52px;
	}

	.img{
		margin-left: 5px;
		height: 75px;
		width: 75px;
		flex: 0 0 85px;
	}

	.inforight{
		margin-left: 5px;
		flex:1;
	}
	.inforight ul{
		padding-left: 0px;
	}
	.inforight li{
		list-style: none;
		display: inline-block;
	}

	.inforight h4{
		color: #0094ff;
		font-size: 14px;
	}

	.bottom li:first-child{
		color:red;
		margin-right: 5px;
	}

	.bottom li:last-child{
		margin-left: 5px;
	}
	#total{
		height: 100px;
		background-color: rgba(0,0,0,0.1);
		display: flex;
		padding: 5px;;
	}

	#total ul {
		padding-left: 0px;
	}
	#total li{
		list-style: none;
		font-size: 14px;
	}

	#button{
		flex:0 0 60px;
		margin: 30px 0 0 0 ;
	}

	.desc{

		flex:1;
	}
</style>